import { CONFIG } from '@/constants';
import { getScoreList, getScoreTotal } from '@/servers/api/userController';
import { FormattedMessage, useIntl } from '@umijs/max';
import {
    Button,
    Card,
    Col,
    Flex,
    List,
    Row,
    Statistic,
    Typography,
} from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import CountUp from 'react-countup';
import BuyPointsModal from '@/components/BuyPoints/BuyPoints';

const formatter = (value: number) => <CountUp end={value} separator="," />;
type IScroeTotal = {
    this_month: number;
    total: number;
};
type IData = {
    memo: string;
    score: number;
    createtime: number;
};
const NewsForm: React.FC = () => {
    const { Title } = Typography;
    const intl = useIntl();
    const [data, setData] = useState<Array<IData>>();
    const [scroeTotal, setScoreTotal] = useState<IScroeTotal>();

    //积分充值
    function getScoreTotals() {
        getScoreTotal().then((res) => {
            setScoreTotal(res.data);
        });
    }
    //积分统计
    function getScoreLists() {
        getScoreList().then((res) => {
            setData(res.data);
        });
    }
    const [isModalOpen, setisModalOpen] = useState(false);
    function BuyPoints() {
        setisModalOpen(true);
    }

    useEffect(() => {
        getScoreTotals();
        getScoreLists();
    }, []);
    return (
        <>
            <Row gutter={40}>
                <Col span={4}>
                    <Card
                        styles={{
                            body: {
                                background: `url(${CONFIG.IMAGE_URL}/uploads/20231101/4088564162f99b8302e6ceabf230ee50.png)`,
                                backgroundSize: '100% 100%',
                            },
                        }}
                    >
                        <Statistic
                            valueStyle={{ color: '#fff' }}
                            formatter={formatter}
                            title={
                                <div style={{ color: '#fff', fontWeight: 600 }}>
                                    {intl.formatMessage({ id: '目前总积分' })}
                                </div>
                            }
                            value={scroeTotal?.total}
                        />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card
                        styles={{
                            body: {
                                background: `url(${CONFIG.IMAGE_URL}/uploads/20231101/4088564162f99b8302e6ceabf230ee50.png)`,
                                backgroundSize: '100% 100%',
                            },
                        }}
                    >
                        <Statistic
                            valueStyle={{ color: '#fff' }}
                            formatter={formatter}
                            title={
                                <div style={{ color: '#fff', fontWeight: 600 }}>
                                    {intl.formatMessage({ id: '本月累计积分' })}
                                </div>
                            }
                            value={scroeTotal?.this_month}
                        />
                    </Card>
                </Col>
                <Col span={4}>
                    <Flex
                        justify="flex-start"
                        align="center"
                        style={{ height: '100%' }}
                    >
                        <Button
                            onClick={BuyPoints}
                            style={{
                                background: 'rgb(255,143,89)',
                                borderColor: 'rgb(255,143,89)',
                                color: '#fff',
                            }}
                        >
                            <FormattedMessage id="充值积分"></FormattedMessage>
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Title level={5} style={{ fontWeight: 'normal', marginTop: 10 }}>
                <FormattedMessage id="积分使用明细"></FormattedMessage>
            </Title>
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item) => (
                    <List.Item
                        extra={
                            <span
                                style={{
                                    color: 'var(--ant-volcano-5)',
                                    fontWeight: 600,
                                    fontSize: 18,
                                }}
                            >
                                {item.score}
                            </span>
                        }
                    >
                        <List.Item.Meta
                            title={item.memo}
                            description={dayjs(item.createtime * 1000).format(
                                'YYYY-MM-DD HH:mm:ss',
                            )}
                        />
                    </List.Item>
                )}
            />
            <BuyPointsModal
                isModalOpen={isModalOpen}
                setisModalOpen={setisModalOpen}
            />
        </>
    );
};
export default NewsForm;
